{% extends "base.html" %}

{% block body %}

<ol class="breadcrumb">
  <li>服务</li>
  <li class="active">日志</li>
</ol>

<div class="page-header">
  <h2>日志</h2>
</div>
    {% if not score is None %}
    <div class="page-header">
      <h4>你的评分为{{ score }}</h4>
    </div>
    {% else %}
    <div class="page-header">
      <h4>导师尚未评分</h4>
    </div>
    {% endif %}
<script type="text/javascript">
$(function () {
        window.onload=function () {
            if (window.s) {
                window.s.close()
            }
            /*创建socket连接*/
            var schema = window.location.protocol=='https:' ? 'wss:' : 'ws:';
            var wsurl=schema+"//"+window.location.host+window.location.pathname+window.location.search
            var socket = new WebSocket(wsurl);
            socket.onopen = function () {
                console.log('WebSocket open');//成功连接上Websocket
            };
            socket.onmessage = function (e)  {
                //获取messagecontainer相关参数，根据参数设置自动滚动显示
                window.viewH =$("#messagecontainer").height(),//可见高度
                window.contentH =$("#messagecontainer").get(0).scrollHeight,//内容高度
                window.scrollTop =$("#messagecontainer").scrollTop();//滚动高度 

                //判断是否存在滚动条，当第一次出现滚动条时，开始自动滚动内容 
                var message_container=document.getElementById("messagecontainer"); 
                if(message_container.scrollHeight<=message_container.clientHeight){
                window.viewH =1,//可见高度
                window.contentH =1,//内容高度
                window.scrollTop =1;//滚动高度 
                }
                $('#messagecontainer').append(e.data);
                    //当滚动到距离底部1%时，自动滚动，否则不自动滚动
                    if(scrollTop/(contentH -viewH) >= 0.99){ 
                        var now = new Date(); //实现自动滚动到底部
                        var div = document.getElementById('messagecontainer'); //实现自动滚动到底部
                        div.scrollTop = div.scrollHeight; //实现自动滚动到底部
                        }
            };
            // Call onopen directly if socket is already open
            if (socket.readyState == WebSocket.OPEN) socket.onopen();
            window.s = socket;
        };

    });
</script>

<h5><code style="font-size: 13px;">{{name}}@{{host}}</code></h5>
<pre id="messagecontainer" style="background: white;height:500px; overflow:auto">
</pre>
{% endblock %}